<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Drawing in Tcl/Tk</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, drawing, Tcl/Tk, Tcl, learn Tcl/Tk">
<meta name="description" content="This part of the Tcl/Tk tutorial covers drawing.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Drawing</h1>

<p>
In this part of the Tcl/Tk tutorial we will do some drawing. Drawing in Tk is
done on the <code>canvas</code> widget. The canvas is a high level facility for graphics
in Tk.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 


<p>
It can be used to create charts, custom widgets or to create games.
</p>


<h2>Colors</h2>

<p>
A color is an object representing a combination of 
Red, Green, and Blue (RGB) intensity values. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# This program draws three
# rectangles filled with different
# colors.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


canvas .can
.can create rect 30 10 120 80 \
    -outline #fb0 -fill #fb0
.can create rect 150 10 240 80 \
    -outline #f50 -fill #f50
.can create rect 270 10 370 80 \
    -outline #05f -fill #05f       
pack .can 


wm title . "colors" 
wm geometry . 400x100+300+300
</pre>

<p>
In the code example, we draw three rectangles and fill them with
different color values.
</p>

<pre class="explanation">
canvas .can
</pre>

<p>
We create the <code>canvas</code> widget.
</p>

<pre class="explanation">
.can create rect 30 10 120 80 \
    -outline #fb0 -fill #fb0
</pre>

<p>
With the <code>create</code> command, we create a new rectangle item
on the canvas.
The first four parameters are the x, y coordinates
of the two bounding points. The top-left and the bottom-right. 
With the -outline option we control the color of 
the outline of the rectangle. Likewise, the -fill option provides 
a color for the inside of the rectangle. 
</p>


<img src="/img/gui/tcltk/colors.png" alt="colors">
<div class="figure">Figure: colors</div>



<h2>Shapes</h2>

<p>
We can draw various shapes on the canvas. 
The following code example will show some of them. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we draw basic 
# shapes on the canvas.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


canvas .can
.can create oval 10 10 80 80 -outline #777 \
    -fill #777 
.can create oval 110 10 210 80 -outline #777 \
    -fill #777 
.can create rect 230 10 290 60 -outline #777 \
    -fill #777 
.can create arc 30 200 90 100 -start 0 -extent 210 \
    -outline #777 -fill #777 
    
set points  [ list 150 100 200 120 240 180 210 \
    200 150 150 100 200 ]
.can create polygon $points -outline #777 \
    -fill #777 
pack .can

wm title . "shapes" 
wm geometry . 330x220+300+300
</pre>

<p>
We draw five different shapes on the window. A circle, an ellipse, 
a rectangle, an arc and a polygon. Outlines and
insides are drawn in the same gray color.
</p>

<pre class="explanation">
.can create oval 10 10 80 80 -outline #777 \
    -fill #777 
</pre>

<p>
The <code>create oval</code> creates a circle. The first four parameters 
are the bounding box coordinates of
the circle. In other words, they are x, y coordinates of the top-left 
and bottom-right points of the box, in which the circle is drawn. 
</p>

<pre class="explanation">
.can create rect 230 10 290 60 -outline #777 \
    -fill #777
</pre>

<p>
We create a rectangle item. The coordinates are again the bounding box 
of the rectangle to be drawn. 
</p>

<pre class="explanation">
.can create arc 30 200 90 100 -start 0 -extent 210 \
    -outline #777 -fill #777 
</pre>

<p>
This code line creates an arc. An arc is a part of the circumference of
the circle. We provide the bounding box. The -start option 
is the start angle of the arc. The -extent is the angle size.
</p>

<pre class="explanation">
set points  [ list 150 100 200 120 240 180 210 \
    200 150 150 100 200 ]
.can create polygon $points -outline #777 \
    -fill #777 
</pre>

<p>
A polygon is created. It is a shape with multiple corners. To create a
polygon in Tk, we provide the list of polygon coordinates to the
<code>create polygon</code> command.
</p>


<img src="/img/gui/tcltk/shapes.png" alt="shapes">
<div class="figure">Figure: shapes</div>



<h2>Drawing image</h2>

<p>
In the following example we will create an image item on the canvas.
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# This program draws an image
# on the canvas widget.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com

package require Img

image create photo img -file "tatras.jpg"
set height [image height img]
set width [image width img]


canvas .can -height $height -width $width
.can create image 0 0 -anchor nw -image img
pack .can

wm title . "High Tatras" 
wm geometry . +300+300
</pre>

<p>
We display an image on the canvas. 
</p>

<pre class="explanation">
image create photo img -file "tatras.jpg"
</pre>

<p>
We create a photo image from a jpg image located
in the current working directory.
</p>

<pre class="explanation">
set height [image height img]
set width [image width img]
</pre>

<p>
We get the height and width of the image. 
</p>


<pre class="explanation">
canvas .can -height $height -width $width
</pre>

<p>
We create the <code>canvas</code> widget. It takes the size of the image
into account. 
</p>

<pre class="explanation">
.can create image 0 0 -anchor nw -image img
</pre>

<p>
We use the <code>create image</code> command to create an image item
on the canvas. To show the whole image, it is anchored to the north and
to the west. The -image option provides the photo image 
to display.
</p>


<h2>Drawing text</h2>

<p>
In the last example, we are going to draw text
on the window. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we draw text
# on the window.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


canvas .can
.can create text 10 30 -anchor w -font Purisa \
    -text "Most relationships seem so transitory"
.can create text 10 60 -anchor w -font Purisa \
    -text "They're good but not the permanent one"
.can create text 10 110 -anchor w -font Purisa \
    -text "Who doesn't long for someone to hold"
.can create text 10 140 -anchor w -font Purisa \
    -text "Who knows how to love without being told"
.can create text 10 170 -anchor w -font Purisa \
    -text "Somebody tell me why I'm on my own"
.can create text 10 200 -anchor w -font Purisa \
     -text "If there's a soulmate for everyone"        
pack .can

wm title . "lyrics" 
wm geometry . 430x250+300+300
</pre>

<p>
We draw a lyrics of a song on the window. 
</p>

<pre class="explanation">
.can create text 10 30 -anchor w -font Purisa \
    -text "Most relationships seem so transitory"
</pre>

<p>
The first two parameters are the x, y coordinates of the
<b>center</b> point of the text. If we anchor the text item
to the west, the text starts from this position. The -font option
provides the font of the text and the -text option is the 
text to be displayed. 
</p>


<img src="/img/gui/tcltk/lyrics.png" alt="Drawing text">
<div class="figure">Figure: Drawing text</div>


<p>
In this part of the Tcl/Tk tutorial, we did some drawing.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 10, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

